import { defineComponent } from "../../src"


export default defineComponent(props => {
    return {
        template: `
        <li class="item">
            <div :class="{ bold: isFolder }" @click="toggle" @dblclick="changeType">
                <span>{{ model.name }}</span>
                <span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
            </div>
            <ul v-show="open" v-if="isFolder">
                <li v-for="model in model.children" v-scope="TreeItem({model})"></li>
                <li class="add" @click="addChild">+</li>
            </ul>
        </li>
        `,
        data() {
            return {
                model: props.model,
                open: false,

                get isFolder() {
                    return this.model.children && this.model.children.length
                }
            }
        },
        methods: {
            toggle() {
                if (this.isFolder) {
                    this.open = !this.open
                }
            },
            changeType() {
                if (!this.isFolder) {
                    this.model.children = []
                    this.addChild()
                    this.open = true
                }

            },
            addChild() {
                this.model.children.push({
                    name: 'new stuff'
                })
            }
        }
    }
})